<template>
  <div class="quest-container">
    <div class="flex mb-16">
      <el-button type="primary" @click="addHandle">添加</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="分类名称" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="editHandle(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            size="small"
            @click="delHandle(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-24">
      <Pagination
        class="text-center"
        :page="pageForm.page"
        :limit="pageForm.limit"
        :total="tableTotal"
        @pagination="pageHandle"
      />
    </div>
    <!-- 添加/编辑弹窗 -->
    <el-dialog v-model="show" title="添加/编辑分类" width="700">
      <div class="mt-12">
        <el-form
          :model="form"
          ref="formRef"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item
            label="分类名称"
            prop="name"
            :rules="[
              {
                required: true,
                message: '请输入商品名称',
                trigger: 'blur'
              }
            ]"
          >
            <el-input v-model="form.name" placeholder="请输入分类名称" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="formSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Pagination from '@/components/Pagination';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  apiGoodsClassifyList,
  apiGoodsClassifyDel,
  apiGoodsClassifyAdd,
  apiGoodsClassifyEdit
} from '@/api/integral';
const tableData = ref([]);
const tableTotal = ref(0);
const show = ref(false);
const initalValues = {
  name: ''
};
const form = ref(initalValues);
const formRef = ref(null);
// 删除
const delHandle = ({ id }) => {
  ElMessageBox.confirm('您确定要删除这个分类吗?', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      apiGoodsClassifyDel({
        id
      }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          });
          getData();
        }
      });
    })
    .catch(() => {});
};
/**
 * 编辑
 */
const editId = ref('');
const editHandle = (record) => {
  show.value = true;
  formRef.value?.resetFields();
  editId.value = record.id;
  form.value = JSON.parse(JSON.stringify(record));
};
// 添加
const addHandle = () => {
  show.value = true;
  formRef.value?.resetFields();
  editId.value = '';
  form.value = initalValues;
};
/**
 * 表单保存
 */
const formSubmit = async () => {
  await formRef.value.validate(async (valid) => {
    if (valid) {
      const api = editId.value ? apiGoodsClassifyEdit : apiGoodsClassifyAdd;
      const params = editId.value
        ? { ...form.value, id: editId.value }
        : form.value;
      const { code } = await api(params);
      if (code === 200) {
        ElMessage({
          type: 'success',
          message: '保存成功'
        });
        show.value = false;
        getData();
      }
    }
  });
};
/**
 * 表格勾选复选框
 */
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val);
};
/**
 * 分页
 */
const pageForm = ref({
  page: 1,
  limit: 10
});
const pageHandle = (val) => {
  pageForm.value = val;
  getData();
};
// 获取表格数据
const getData = async () => {
  const { data, total } = await apiGoodsClassifyList(pageForm.value);
  tableData.value = data;
  tableTotal.value = total;
};
onMounted(() => {
  getData();
});
</script>

<style scoped>
.quest-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
}
</style>
